<template>
  <div class="json-parser">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>JSON 解析器</span>
      </div>
      
      <!-- Kafka配置选择区域 -->
      <div class="kafka-config-top-selector">
        <h3>Kafka 配置选择</h3>
        <div class="kafka-config-container">
          <el-select v-model="selectedKafkaConfigId" placeholder="选择Kafka配置" @change="loadKafkaConfigJson" style="width: 70%;">
            <el-option
              v-for="config in kafkaConfigs"
              :key="config.id"
              :label="`${config.name} (${config.url}/${config.topic})`"
              :value="config.id">
              <span style="float: left">{{ config.name }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ config.topic }}</span>
            </el-option>
          </el-select>
          <el-button type="primary" size="small" icon="el-icon-refresh" @click="loadKafkaConfigs">刷新配置</el-button>
        </div>
      </div>
      
      <div class="parser-container">
        <!-- 左侧：JSON数据展示 -->
        <div class="json-display">
          <h3>JSON 数据</h3>
          <div v-if="loading" class="loading-container">
            <el-skeleton :rows="10" animated />
          </div>
          <template v-else>
            <el-input
              type="textarea"
              :rows="16"
              :placeholder="getJsonPlaceholder()"
              v-model="jsonData"
              readonly>
            </el-input>
            
            <!-- 发送到Kafka按钮 -->
            <div class="kafka-send-section" v-if="jsonData">
              <h4>发送到Kafka</h4>
              <el-button 
                type="success" 
                :disabled="!jsonData || !selectedKafkaConfigId" 
                :loading="sending"
                @click="sendToKafka">发送当前JSON到Kafka</el-button>
            </div>
          </template>
        </div>
        
        <!-- 右侧：解析后的键值对 -->
        <div class="json-parsed">
          <h3>解析结果</h3>
          <div v-if="loading" class="loading-container">
            <el-skeleton :rows="10" animated />
          </div>
          <div v-else-if="!jsonData" class="empty-message">
            没有可解析的JSON数据，请先在JSON验证器页面保存数据
          </div>
          <div v-else>
            <!-- 添加新键值对区域 -->
            <div class="add-key-value-section">
              <h4>添加新键值对</h4>
              <div class="add-key-value-form">
                <el-input 
                  v-model="newKey" 
                  placeholder="请输入键名" 
                  style="width: 200px; margin-right: 10px;"
                  @keyup.enter="addKeyValue">
                </el-input>
                <el-input 
                  v-model="newValue" 
                  placeholder="请输入值" 
                  style="width: 200px; margin-right: 10px;"
                  @keyup.enter="addKeyValue">
                </el-input>
                <el-button 
                  type="primary" 
                  size="small" 
                  :disabled="!newKey.trim()" 
                  @click="addKeyValue">
                  添加
                </el-button>
              </div>
            </div>
            
            <div class="form-header">
              <h4>编辑JSON数据</h4>
              <el-button type="primary" size="small" @click="applyChanges">应用更改</el-button>
            </div>
            <el-form label-width="200px">
              <template v-for="(item, key) in parsedJson">
                <el-form-item v-if="shouldDisplayKey(key)" :key="key">
                  <template slot="label">
                    <div class="key-label-container">
                      <div class="key-info">
                        <span class="key-label">{{ key }}</span>
                        <span v-if="getChineseName(key)" class="chinese-name">{{ getChineseName(key) }}</span>
                      </div>
                    </div>
                  </template>
                  <!-- 如果是数组类型，显示数组编辑器 -->
                  <div v-if="isArray(item)" class="array-editor">
                    <div class="array-header">
                      <span class="array-info">数组 ({{ item.length }} 项)</span>
                      <el-button size="mini" type="primary" @click="addArrayItem(key)">添加项</el-button>
                    </div>
                    <div v-for="(arrayItem, index) in item" :key="`${key}-${index}`" class="array-item">
                      <div class="array-item-header">
                        <span class="array-index">第{{ index + 1 }}条数据</span>
                        <el-button size="mini" type="danger" @click="removeArrayItem(key, index)">删除</el-button>
                      </div>
                      <el-input 
                        v-if="!isObject(arrayItem)"
                        v-model="item[index]" 
                        :placeholder="`数组项 ${index}`"
                        @change="onArrayItemChange(key, index)">
                      </el-input>
                      <!-- 如果数组项是对象，展开显示对象的键值对 -->
                      <div v-else class="array-object-editor">
                        <div class="array-object-header">
                          <span class="object-info">对象 ({{ Object.keys(arrayItem).length }} 个字段)</span>
                          <el-button size="mini" type="primary" @click="addArrayObjectField(key, index)">添加字段</el-button>
                        </div>
                        <div v-for="(objValue, objKey) in arrayItem" :key="`${key}-${index}-${objKey}`" class="array-object-field">
                          <el-form-item v-if="shouldDisplayArrayObjectKey(key, objKey)" label-width="150px">
                            <template slot="label">
                              <div class="key-label-container array-object">
                                <div class="key-info">
                                  <span class="key-label">{{ objKey }}</span>
                                  <span v-if="getArrayObjectChineseName(key, objKey)" class="chinese-name">{{ getArrayObjectChineseName(key, objKey) }}</span>
                                </div>
                              </div>
                            </template>
                            <div class="array-object-field-input">
                              <el-input 
                                v-model="arrayItem[objKey]" 
                                :placeholder="`${objKey}`"
                                @change="onArrayObjectFieldChange(key, index, objKey)">
                              </el-input>
                              <el-button 
                                size="mini" 
                                type="danger" 
                                icon="el-icon-delete"
                                @click="removeArrayObjectField(key, index, objKey)"
                                title="删除字段">
                              </el-button>
                            </div>
                          </el-form-item>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- 如果不是数组且不是对象，显示普通输入框 -->
                  <el-input 
                    v-else-if="!isComplex(item)"
                    v-model="parsedJson[key]" 
                    @change="onValueChange(key)">
                  </el-input>
                  <!-- 如果是对象类型，显示对象编辑器 -->
                  <div v-else-if="isObject(item) && !isArray(item)" class="object-editor">
                    <div class="object-header">
                      <span class="object-info">对象 ({{ Object.keys(item).length }} 个字段)</span>
                      <el-button size="mini" type="primary" @click="addObjectField(key)">添加字段</el-button>
                    </div>
                  </div>
                </el-form-item>
                <!-- 如果是嵌套对象，递归显示 -->
                <div v-if="isObject(item) && !isArray(item) && shouldDisplayKey(key)" class="nested-object" :key="`${key}-nested`">
                  <div v-for="(nestedItem, nestedKey) in item" :key="`${key}-${nestedKey}`">
                    <el-form-item v-if="shouldDisplayNestedKey(key, nestedKey)">
                      <template slot="label">
                        <div class="key-label-container nested">
                          <div class="key-info">
                            <span class="key-label">{{ key }}.{{ nestedKey }}</span>
                            <span v-if="getChineseName(`${key}.${nestedKey}`)" class="chinese-name">{{ getChineseName(`${key}.${nestedKey}`) }}</span>
                          </div>
                        </div>
                      </template>
                      <el-input 
                        v-model="item[nestedKey]" 
                        :disabled="isComplex(nestedItem)" 
                        @change="onNestedValueChange(key, nestedKey)">
                      </el-input>
                    </el-form-item>
                  </div>
                </div>
              </template>
            </el-form>
          </div>
        </div>
      </div>
      
    </el-card>
  </div>
</template>

<script>
import { kafkaConfigApi, kafkaApi } from '../api';

export default {
  name: 'JsonParser',
  data() {
    return {
      jsonData: '',
      parsedJson: {},
      loading: false,
      sending: false,
      kafkaConfigs: [],
      selectedKafkaConfigId: null,
      
      // 新增键值对相关数据
      newKey: '',
      newValue: '',
      
      // 中文字段映射数据
      keyMapColumns: [],
      
      // 字段显示配置数据
      keyDisplayConfigs: [],
      
      // 数组项显示值缓存
      arrayItemDisplayValue: {}
    }
  },
  created() {
    // 加载Kafka配置列表
    this.loadKafkaConfigs();
    // 加载key映射列表
    this.loadKeyMapData();
    // 注意：字段显示配置会在loadKafkaConfigJson中根据选中的配置动态加载
  },
  watch: {
    // 监听parsedJson的变化，更新jsonData
    parsedJson: {
      handler() {
        this.updateJsonData();
        this.initializeArrayDisplayValues();
      },
      deep: true // 深度监听对象内部属性的变化
    }
  },
  methods: {
    /**
     * 判断某个键是否应该显示在编辑区域
     * 根据k_key_display表的配置来控制显示
     * @param {string} key - 要检查的键名
     * @return {boolean} 是否应该显示
     */
    shouldDisplayKey(key) {
       // 如果没有选择Kafka配置，不显示任何键
       if (!this.selectedKafkaConfigId) {
         return false;
       }
       
       // 如果没有配置数据，不显示任何键
       if (!this.keyDisplayConfigs || this.keyDisplayConfigs.length === 0) {
         return false;
       }
       
       // 检查是否在配置中
       return this.keyDisplayConfigs.some(config => config.key === key);
     },
     
     /**
      * 判断嵌套键是否应该显示
      * @param {string} parentKey - 父键名
      * @param {string} nestedKey - 嵌套键名
      * @return {boolean} 是否应该显示
      */
     shouldDisplayNestedKey(parentKey, nestedKey) {
        // 如果没有选择Kafka配置，不显示任何键
        if (!this.selectedKafkaConfigId) {
          return false;
        }
        
        // 如果没有配置数据，不显示任何键
        if (!this.keyDisplayConfigs || this.keyDisplayConfigs.length === 0) {
          return false;
        }
        
        // 查找父键的配置
        const parentConfig = this.keyDisplayConfigs.find(config => config.key === parentKey);
        if (!parentConfig) {
          return false; // 父键都没配置，子键不显示
        }
        
        // 如果没有sub配置，默认显示所有子键
        if (!parentConfig.sub) {
          return true;
        }
        
        // 检查子键是否在sub配置中
         try {
           const subConfig = typeof parentConfig.sub === 'string' ? JSON.parse(parentConfig.sub) : parentConfig.sub;
           return Object.prototype.hasOwnProperty.call(subConfig, nestedKey);
         } catch (e) {
           console.error('解析sub配置失败:', e);
           return true; // 解析失败时默认显示
         }
      },
      
      /**
       * 判断数组对象内的键是否应该显示
       * @param {string} arrayKey - 数组键名
       * @param {string} objKey - 对象内的键名
       * @return {boolean} 是否应该显示
       */
      shouldDisplayArrayObjectKey(arrayKey, objKey) {
        // 如果没有选择Kafka配置，不显示任何键
        if (!this.selectedKafkaConfigId) {
          return false;
        }
        
        // 如果没有配置数据，不显示任何键
        if (!this.keyDisplayConfigs || this.keyDisplayConfigs.length === 0) {
          return false;
        }
        
        // 查找数组键的配置
        const arrayConfig = this.keyDisplayConfigs.find(config => config.key === arrayKey);
        if (!arrayConfig) {
          return false; // 数组键都没配置，对象字段不显示
        }
        
        // 如果没有sub配置，默认显示所有对象字段
        if (!arrayConfig.sub) {
          return true;
        }
        
        // 检查对象字段是否在sub配置中
        try {
          const subConfig = typeof arrayConfig.sub === 'string' ? JSON.parse(arrayConfig.sub) : arrayConfig.sub;
          return Object.prototype.hasOwnProperty.call(subConfig, objKey);
        } catch (e) {
          console.error('解析数组sub配置失败:', e);
          return true; // 解析失败时默认显示
        }
      },
      
      /**
       * 获取数组对象字段的中文名称
       * @param {string} arrayKey - 数组键名
       * @param {string} objKey - 对象内的键名
       * @return {string} 中文名称
       */
      getArrayObjectChineseName(arrayKey, objKey) {
        // 查找数组键的配置
        const arrayConfig = this.keyDisplayConfigs.find(config => config.key === arrayKey);
        if (!arrayConfig || !arrayConfig.sub) {
          return '';
        }
        
        try {
          const subConfig = typeof arrayConfig.sub === 'string' ? JSON.parse(arrayConfig.sub) : arrayConfig.sub;
          return subConfig[objKey] || '';
        } catch (e) {
          console.error('解析数组sub配置失败:', e);
          return '';
        }
      },
    
    loadKafkaConfigs() {
      kafkaConfigApi.listKafkaConfigs()
        .then(response => {
          if (response.code === 0) {
            this.kafkaConfigs = response.data;
            if (this.kafkaConfigs.length > 0) {
              // 默认选择第一个配置
              this.selectedKafkaConfigId = this.kafkaConfigs[0].id;
              // 加载选中配置的JSON
              this.loadKafkaConfigJson();
            }
          } else {
            this.$message.error(`获取Kafka配置列表失败: ${response.message}`);
          }
        })
        .catch(error => {
          console.error('获取Kafka配置列表时出错:', error);
          this.$message.error('获取Kafka配置列表失败，请检查网络连接或服务器状态');
        });
    },
    
    // 加载选中Kafka配置的JSON数据
    loadKafkaConfigJson() {
      if (!this.selectedKafkaConfigId) {
        this.jsonData = '';
        this.parsedJson = {};
        return;
      }
      
      const selectedConfig = this.kafkaConfigs.find(config => config.id === this.selectedKafkaConfigId);
      if (!selectedConfig) {
        this.jsonData = '';
        this.parsedJson = {};
        return;
      }
      
      // 加载对应的字段显示配置
      this.loadKeyDisplayConfigs();
      
      if (selectedConfig.json) {
        try {
          // 如果Kafka配置中有JSON数据，解析并显示
          this.jsonData = selectedConfig.json;
          this.parsedJson = JSON.parse(selectedConfig.json);
          // 初始化数组显示值
          this.initializeArrayDisplayValues();
        } catch (e) {
          // 如果解析失败，直接显示原始字符串
          this.jsonData = selectedConfig.json;
          this.parsedJson = {};
          console.warn('Kafka配置中的JSON格式无效:', e);
        }
      } else {
        this.jsonData = '';
        this.parsedJson = {};
      }
    },
    
    // 获取JSON输入框的占位符文本
    getJsonPlaceholder() {
      return this.selectedKafkaConfigId ? '选中的Kafka配置中没有JSON数据' : '请先选择Kafka配置';
    },
    
    sendToKafka() {
      if (!this.jsonData || !this.selectedKafkaConfigId) {
        this.$message.warning('请选择Kafka配置并确保有JSON数据');
        return;
      }
      
      // 找到选中的Kafka配置
      const selectedConfig = this.kafkaConfigs.find(config => config.id === this.selectedKafkaConfigId);
      if (!selectedConfig) {
        this.$message.error('无法找到选中的Kafka配置');
        return;
      }
      
      this.sending = true;
      
      // 解析JSON数据
      let jsonMessage;
      try {
        jsonMessage = JSON.parse(this.jsonData);
      } catch (e) {
        this.$message.error('JSON数据格式错误，无法发送');
        this.sending = false;
        return;
      }
      
      // 发送消息到Kafka
      kafkaApi.sendMessage(selectedConfig.url, selectedConfig.topic, jsonMessage)
        .then(response => {
          if (response.code === 0) {
            this.$message.success('消息已成功发送到Kafka');
          } else {
            this.$message.error(`发送消息失败: ${response.message}`);
          }
        })
        .catch(error => {
          console.error('发送消息到Kafka时出错:', error);
          this.$message.error('发送消息失败，请检查网络连接或Kafka服务器状态');
        })
        .finally(() => {
          this.sending = false;
        });
    },
    isObject(value) {
      return value !== null && typeof value === 'object';
    },
    isArray(value) {
      return Array.isArray(value);
    },
    isComplex(value) {
      // 复杂类型（对象或数组）不允许直接编辑
      return this.isObject(value) || this.isArray(value);
    },
    onValueChange(key) {
      // 当顶层属性值变化时触发
      console.log(`属性 ${key} 的值已更改为: ${this.parsedJson[key]}`);
      
      // 如果修改的是waybillNo字段，同步更新所有waybillNo字段
      if (key === 'waybillNo') {
        this.syncWaybillNoValues(this.parsedJson[key]);
      }
      
      // 由于已经设置了watch监听parsedJson，这里不需要额外更新jsonData
    },
    onNestedValueChange(parentKey, childKey) {
      // 当嵌套属性值变化时触发
      console.log(`嵌套属性 ${parentKey}.${childKey} 的值已更改为: ${this.parsedJson[parentKey][childKey]}`);
      
      // 如果修改的是waybillNo字段，同步更新所有waybillNo字段
      if (childKey === 'waybillNo') {
        this.syncWaybillNoValues(this.parsedJson[parentKey][childKey]);
      }
      
      // 由于已经设置了watch监听parsedJson，这里不需要额外更新jsonData
    },
    applyChanges() {
      try {
        // 确保JSON格式正确
        JSON.parse(this.jsonData);
        this.$message.success('更改已应用到JSON数据');
      } catch (e) {
        this.$message.error(`JSON格式错误: ${e.message}`);
      }
    },
    
    // 添加新的键值对到JSON中
    addKeyValue() {
      if (!this.newKey.trim()) {
        this.$message.warning('请输入键名');
        return;
      }
      
      // 检查是否有JSON数据可以编辑
      if (!this.parsedJson || typeof this.parsedJson !== 'object') {
        this.parsedJson = {};
      }
      
      // 尝试解析值为JSON，如果失败则作为字符串处理
      let processedValue = this.newValue;
      if (this.newValue.trim()) {
        try {
          // 尝试解析为数字
          if (!isNaN(this.newValue) && !isNaN(parseFloat(this.newValue))) {
            processedValue = parseFloat(this.newValue);
          }
          // 尝试解析为布尔值
          else if (this.newValue.toLowerCase() === 'true') {
            processedValue = true;
          }
          else if (this.newValue.toLowerCase() === 'false') {
            processedValue = false;
          }
          // 尝试解析为JSON对象或数组
          else if ((this.newValue.startsWith('{') && this.newValue.endsWith('}')) || 
                   (this.newValue.startsWith('[') && this.newValue.endsWith(']'))) {
            processedValue = JSON.parse(this.newValue);
          }
        } catch (e) {
          // 解析失败，保持为字符串
          processedValue = this.newValue;
        }
      }
      
      // 检查键是否已存在
       const keyExists = Object.prototype.hasOwnProperty.call(this.parsedJson, this.newKey);
      
      // 添加或更新键值对
      this.$set(this.parsedJson, this.newKey, processedValue);
      
      // 显示成功消息
      if (keyExists) {
        this.$message.success(`键 "${this.newKey}" 已更新`);
      } else {
        this.$message.success(`键 "${this.newKey}" 已添加`);
      }
      
      // 清空输入框
      this.newKey = '';
      this.newValue = '';
    },
    

    

    

     
     // 更新JSON数据
     updateJsonData() {
       this.jsonData = JSON.stringify(this.parsedJson, null, 2);
     },

     /**
      * 根据英文key获取对应的中文名称
      * 
      * @param {string} key - 英文key
      * @return {string} 中文名称，如果找不到则返回空字符串
      */
     getChineseName(key) {
       // 首先从字段显示配置中查找
       if (key.includes('.')) {
         // 处理嵌套键，如 "parent.child"
         const [parentKey, childKey] = key.split('.');
         const displayConfig = this.keyDisplayConfigs.find(config => config.key === parentKey);
         if (displayConfig && displayConfig.sub && displayConfig.sub[childKey]) {
           return displayConfig.sub[childKey];
         }
       } else {
         // 处理顶级键
         const displayConfig = this.keyDisplayConfigs.find(config => config.key === key);
         if (displayConfig && displayConfig.name) {
           return displayConfig.name;
         }
       }
       
       // 如果字段显示配置中没有找到，回退到原有的keyMapColumns
       const keyMap = this.keyMapColumns.find(item => item.key === key);
       return keyMap ? keyMap.name : '';
     },

     // 添加加载 k_key_map 数据的方法
     loadKeyMapData() {
       kafkaConfigApi.getKeyMapList()
         .then(response => {
           if (response.code === 0) {
             this.keyMapColumns = response.data.map(item => ({
               name: item.name,
               key: item.key,
               value: item.value
             }));
             console.log('获取到key映射列表:', this.keyMapColumns);
           } else {
             this.$message.error(`获取key映射列表失败: ${response.message}`);
           }
         })
         .catch(error => {
           console.error('获取key映射列表时出错:', error);
           this.$message.error('获取key映射列表失败，请检查网络连接或服务器状态');
         });
     },
     
     // 加载字段显示配置数据的方法
     loadKeyDisplayConfigs() {
       const configId = this.selectedKafkaConfigId;
       kafkaConfigApi.getKeyDisplayList(configId)
         .then(response => {
           if (response.code === 0) {
             this.keyDisplayConfigs = response.data;
             console.log('获取到字段显示配置列表:', this.keyDisplayConfigs);
           } else {
             this.$message.error(`获取字段显示配置失败: ${response.message}`);
           }
         })
         .catch(error => {
           console.error('获取字段显示配置时出错:', error);
           this.$message.error('获取字段显示配置失败，请检查网络连接或服务器状态');
         });
     },

     /**
      * 同步更新所有waybillNo字段的值
      * 
      * @param {string} newValue - 新的waybillNo值
      */
     syncWaybillNoValues(newValue) {
       this.updateWaybillNoInObject(this.parsedJson, newValue);
       this.$message.success(`已同步更新所有waybillNo字段为: ${newValue}`);
     },

     /**
      * 递归更新对象中所有waybillNo字段的值
      * 
      * @param {Object} obj - 要更新的对象
      * @param {string} newValue - 新的waybillNo值
      */
     updateWaybillNoInObject(obj, newValue) {
       if (!obj || typeof obj !== 'object') {
         return;
       }

       for (const key in obj) {
         if (Object.prototype.hasOwnProperty.call(obj, key)) {
           if (key === 'waybillNo') {
             // 使用Vue的$set方法确保响应式更新
             this.$set(obj, key, newValue);
           } else if (typeof obj[key] === 'object' && obj[key] !== null && !Array.isArray(obj[key])) {
             // 递归处理嵌套对象
             this.updateWaybillNoInObject(obj[key], newValue);
           } else if (Array.isArray(obj[key])) {
             // 处理数组中的对象
             obj[key].forEach(item => {
               if (typeof item === 'object' && item !== null) {
                 this.updateWaybillNoInObject(item, newValue);
               }
             });
           }
         }
       }
     },

     /**
      * 为数组添加新项
      * 
      * @param {string} key - 数组的键名
      */
     addArrayItem(key) {
       if (this.isArray(this.parsedJson[key])) {
         // 检查数组中现有项的类型，以确定默认添加的类型
          const existingItems = this.parsedJson[key];
          let hasObjects = false;
          
          existingItems.forEach(item => {
            if (this.isObject(item)) {
              hasObjects = true;
            }
          });
         
         // 如果数组中有对象，询问用户要添加什么类型的项
         if (hasObjects || existingItems.length === 0) {
           this.$confirm('请选择要添加的项类型', '添加数组项', {
             distinguishCancelAndClose: true,
             confirmButtonText: '对象',
             cancelButtonText: '字符串',
             type: 'info'
           }).then(() => {
              // 添加对象类型
              this.parsedJson[key].push({});
              this.$message.success(`已为数组 "${key}" 添加新对象项`);
            }).catch(action => {
              if (action === 'cancel') {
                // 添加字符串类型
                this.parsedJson[key].push('');
                this.$message.success(`已为数组 "${key}" 添加新字符串项`);
              }
            });
         } else {
            // 如果数组中只有字符串，直接添加字符串
            this.parsedJson[key].push('');
            this.$message.success(`已为数组 "${key}" 添加新项`);
          }
       }
     },

     /**
      * 删除数组项
      * 
      * @param {string} key - 数组的键名
      * @param {number} index - 要删除的项的索引
      */
     removeArrayItem(key, index) {
       if (this.isArray(this.parsedJson[key]) && index >= 0 && index < this.parsedJson[key].length) {
         this.parsedJson[key].splice(index, 1);
         this.$message.success(`已删除数组 "${key}" 的第 ${index} 项`);
       }
     },

     /**
      * 为数组对象添加新字段
      * 
      * @param {string} key - 数组的键名
      * @param {number} index - 对象在数组中的索引
      */
     addArrayObjectField(key, index) {
       if (this.isArray(this.parsedJson[key]) && 
           index >= 0 && 
           index < this.parsedJson[key].length && 
           this.isObject(this.parsedJson[key][index])) {
         
         this.$prompt('请输入新字段的键名', '添加字段', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
           inputPattern: /^[a-zA-Z_][a-zA-Z0-9_]*$/,
           inputErrorMessage: '字段名只能包含字母、数字和下划线，且不能以数字开头'
         }).then(({ value }) => {
           const fieldName = value.trim();
           if (fieldName && !Object.prototype.hasOwnProperty.call(this.parsedJson[key][index], fieldName)) {
             this.$set(this.parsedJson[key][index], fieldName, '');
             this.$message.success(`已为对象添加字段 "${fieldName}"`);
           } else if (Object.prototype.hasOwnProperty.call(this.parsedJson[key][index], fieldName)) {
             this.$message.warning(`字段 "${fieldName}" 已存在`);
           }
         }).catch(() => {
           // 用户取消操作
         });
       }
     },

      /**
       * 删除数组对象字段
       * 
       * @param {string} key - 数组的键名
       * @param {number} index - 对象在数组中的索引
       * @param {string} fieldName - 要删除的字段名
       */
      removeArrayObjectField(key, index, fieldName) {
        if (this.isArray(this.parsedJson[key]) && 
            index >= 0 && 
            index < this.parsedJson[key].length && 
            this.isObject(this.parsedJson[key][index]) &&
            Object.prototype.hasOwnProperty.call(this.parsedJson[key][index], fieldName)) {
          
          this.$confirm(`确定要删除字段 "${fieldName}" 吗？`, '删除确认', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$delete(this.parsedJson[key][index], fieldName);
            this.$message.success(`已删除字段 "${fieldName}"`);
          }).catch(() => {
            // 用户取消操作
          });
        }
      },

      /**
       * 为对象添加新字段
       * 
       * @param {string} key - 对象的键名
       */
      addObjectField(key) {
        if (this.isObject(this.parsedJson[key]) && !this.isArray(this.parsedJson[key])) {
          this.$prompt('请输入新字段的键名', '添加字段', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            inputPattern: /^[a-zA-Z_][a-zA-Z0-9_]*$/,
            inputErrorMessage: '字段名只能包含字母、数字和下划线，且不能以数字开头'
          }).then(({ value }) => {
            const fieldName = value.trim();
            if (fieldName && !Object.prototype.hasOwnProperty.call(this.parsedJson[key], fieldName)) {
              this.$set(this.parsedJson[key], fieldName, '');
              this.$message.success(`已为对象添加字段 "${fieldName}"`);
            } else if (Object.prototype.hasOwnProperty.call(this.parsedJson[key], fieldName)) {
              this.$message.warning(`字段 "${fieldName}" 已存在`);
            }
          }).catch(() => {
            // 用户取消操作
          });
        }
      },

      /**
       * 数组项值变化处理
      * 
      * @param {string} key - 数组的键名
      * @param {number} index - 数组项的索引
      */
     onArrayItemChange(key, index) {
       console.log(`数组 ${key}[${index}] 的值已更改为: ${this.parsedJson[key][index]}`);
       
       // 尝试自动类型转换
       const value = this.parsedJson[key][index];
       if (typeof value === 'string' && value.trim() !== '') {
         // 尝试转换为数字
         if (!isNaN(value) && !isNaN(parseFloat(value))) {
           this.$set(this.parsedJson[key], index, parseFloat(value));
         }
         // 尝试转换为布尔值
         else if (value.toLowerCase() === 'true') {
           this.$set(this.parsedJson[key], index, true);
         }
         else if (value.toLowerCase() === 'false') {
           this.$set(this.parsedJson[key], index, false);
         }
         // 尝试解析为JSON
         else if ((value.startsWith('{') && value.endsWith('}')) || 
                  (value.startsWith('[') && value.endsWith(']'))) {
           try {
             this.$set(this.parsedJson[key], index, JSON.parse(value));
           } catch (e) {
             // 解析失败，保持为字符串
           }
         }
       }
     },

     /**
      * 数组对象项值变化处理
      * 
      * @param {string} key - 数组的键名
      * @param {number} index - 数组项的索引
      * @param {Event} event - 输入事件
      */
     onArrayObjectChange(key, index, event) {
       const value = event.target.value;
       console.log(`数组对象 ${key}[${index}] 的值已更改为: ${value}`);
       
       try {
         // 尝试解析为JSON对象
         const parsedValue = JSON.parse(value);
         this.$set(this.parsedJson[key], index, parsedValue);
         this.$message.success(`数组项 ${key}[${index}] 已更新`);
       } catch (e) {
         this.$message.error(`JSON格式错误: ${e.message}`);
         // 恢复原始值
         this.$set(this.arrayItemDisplayValue, `${key}-${index}`, JSON.stringify(this.parsedJson[key][index], null, 2));
       }
     },
     
     /**
      * 数组对象字段值变化处理
      * 
      * @param {string} arrayKey - 数组的键名
      * @param {number} index - 数组项的索引
      * @param {string} objKey - 对象字段的键名
      */
     onArrayObjectFieldChange(arrayKey, index, objKey) {
       console.log(`数组对象字段 ${arrayKey}[${index}].${objKey} 的值已更改为: ${this.parsedJson[arrayKey][index][objKey]}`);
       
       // 尝试自动类型转换
       const value = this.parsedJson[arrayKey][index][objKey];
       if (typeof value === 'string' && value.trim() !== '') {
         // 尝试转换为数字
         if (!isNaN(value) && !isNaN(parseFloat(value))) {
           this.$set(this.parsedJson[arrayKey][index], objKey, parseFloat(value));
         }
         // 尝试转换为布尔值
         else if (value.toLowerCase() === 'true') {
           this.$set(this.parsedJson[arrayKey][index], objKey, true);
         }
         else if (value.toLowerCase() === 'false') {
           this.$set(this.parsedJson[arrayKey][index], objKey, false);
         }
       }
     },

     /**
      * 初始化数组项显示值
      */
     initializeArrayDisplayValues() {
       for (const key in this.parsedJson) {
         if (this.isArray(this.parsedJson[key])) {
           this.parsedJson[key].forEach((item, index) => {
             if (this.isObject(item)) {
               this.$set(this.arrayItemDisplayValue, `${key}-${index}`, JSON.stringify(item, null, 2));
             }
           });
         }
       }
     }

  },
  

}
</script>

<style scoped>
.json-parser {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}
.parser-container {
  display: flex;
  gap: 20px;
}
.json-display, .json-parsed {
  flex: 1;
  padding: 10px;
}
.nested-object {
  margin-left: 20px;
  padding-left: 10px;
  border-left: 1px solid #ebeef5;
}
.empty-message {
  color: #909399;
  text-align: center;
  padding: 20px;
}
/* Kafka配置顶部选择器样式 */
.kafka-config-top-selector {
  background: #f0f8ff;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
  border: 2px solid #e3f2fd;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.kafka-config-top-selector h3 {
  margin: 0 0 16px 0;
  color: #1976d2;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
}

.kafka-config-top-selector h3::before {
  content: '⚙️';
  margin-right: 8px;
}

.kafka-config-container {
  display: flex;
  gap: 12px;
  align-items: center;
}

.kafka-config-container .el-select {
  flex: 1;
}

/* 数据源切换标签样式 */
.data-source-tabs {
  margin-bottom: 16px;
  padding: 12px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.data-source-tabs .el-radio-group {
  width: 100%;
}

.data-source-tabs .el-radio-button {
  flex: 1;
}

.data-source-tabs .el-radio-button__inner {
  width: 100%;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.data-source-tabs .el-radio-button__orig-radio:checked + .el-radio-button__inner {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-color: #667eea;
  color: white;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

/* Kafka发送区域样式 */
.kafka-send-section {
  margin-top: 20px;
  padding: 16px;
  background: #f0f9ff;
  border-radius: 8px;
  border: 1px solid #bae6fd;
}

.kafka-send-section h4 {
  margin: 0 0 12px 0;
  color: #0369a1;
  font-size: 14px;
  font-weight: 600;
}

/* JSON选择器样式 */
.json-selector {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.json-selector .el-select {
  flex: 1;
  margin-right: 10px;
}
.loading-container {
  padding: 20px 0;
}
.kafka-config-selector {
  margin-top: 15px;
  border-top: 1px solid #ebeef5;
  padding-top: 15px;
}
.kafka-send-container {
  display: flex;
  align-items: center;
  gap: 10px;
}
.form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
}
.form-header h4 {
  margin: 0;
  color: #303133;
}

/* 添加键值对区域样式 */
.add-key-value-section {
  background: #f8fafc;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
  border: 1px solid #e2e8f0;
}

.add-key-value-section h4 {
  margin: 0 0 12px 0;
  color: #374151;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
}

.add-key-value-section h4::before {
  content: '➕';
  margin-right: 8px;
}

.add-key-value-form {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.add-key-value-form .el-input {
  min-width: 180px;
}

.add-key-value-form .el-button {
  min-width: 60px;
}

@media (max-width: 768px) {
  .add-key-value-form {
    flex-direction: column;
    align-items: stretch;
  }
  
  .add-key-value-form .el-input {
    width: 100%;
    margin-right: 0 !important;
    margin-bottom: 10px;
  }
}

/* 键值对标签样式 */
.key-label-container {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
}

.key-label-container.nested {
  padding-left: 16px;
  position: relative;
}

.key-label-container.nested::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 12px;
  height: 1px;
  background-color: #dcdfe6;
  transform: translateY(-50%);
}

.key-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.key-label {
  font-weight: 500;
  color: #606266;
  font-size: 14px;
  user-select: none;
}

.chinese-name {
  font-size: 12px;
  color: #67c23a;
  font-weight: 500;
  line-height: 1;
  margin-left: 4px;
}

/* 禁用状态的输入框样式 */
.el-input.is-disabled .el-input__inner {
  background-color: #f5f7fa;
  border-color: #e4e7ed;
  color: #c0c4cc;
}

/* 嵌套对象容器样式优化 */
.nested-object {
  margin-left: 20px;
  padding-left: 16px;
  border-left: 2px solid #e4e7ed;
  margin-top: 8px;
  margin-bottom: 8px;
}

/* 表单项间距优化 */
.json-parsed .el-form-item {
  margin-bottom: 16px;
}

.json-parsed .el-form-item:last-child {
  margin-bottom: 0;
}

/* 数组编辑器样式 */
.array-editor {
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  padding: 12px;
  background-color: #fafafa;
}

.array-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e4e7ed;
}

.array-info {
  font-size: 14px;
  color: #606266;
  font-weight: 500;
}

.array-item {
  margin-bottom: 8px;
  padding: 8px;
  background-color: #ffffff;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
}

.array-item:last-child {
  margin-bottom: 0;
}

.array-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.array-index {
  font-size: 12px;
  color: #909399;
  font-weight: 500;
  background-color: #f5f7fa;
  padding: 2px 6px;
  border-radius: 2px;
}

/* 数组对象编辑器样式 */
.array-object-editor {
  border: 1px solid #d3d4d6;
  border-radius: 4px;
  padding: 12px;
  background-color: #f8f9fa;
  margin-top: 8px;
}

.array-object-header {
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e4e7ed;
}

.object-info {
  font-size: 13px;
  color: #606266;
  font-weight: 500;
  font-style: italic;
}

.array-object-field {
  margin-bottom: 8px;
}

.array-object-field:last-child {
  margin-bottom: 0;
}

.key-label-container.array-object {
  padding-left: 0;
}

.key-label-container.array-object .key-info {
  gap: 6px;
}

.key-label-container.array-object .key-label {
  font-size: 13px;
  color: #666;
}

.key-label-container.array-object .chinese-name {
  font-size: 11px;
  color: #67c23a;
}

/* 数组对象字段输入框和按钮组合样式 */
.array-object-field-input {
  display: flex;
  align-items: center;
  gap: 8px;
}

.array-object-field-input .el-input {
  flex: 1;
}

.array-object-field-input .el-button {
  flex-shrink: 0;
}

.array-object-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e4e7ed;
}

/* 对象编辑器样式 */
.object-editor {
  border: 1px solid #d3d4d6;
  border-radius: 4px;
  padding: 12px;
  background-color: #f8f9fa;
  margin-top: 8px;
}

.object-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e4e7ed;
}

.object-header .object-info {
  font-size: 13px;
  color: #606266;
  font-weight: 500;
  font-style: italic;
}

</style>